<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  <input type="text" class="search">
  <ul class="list"></ul>
</body>
<script>
  // 百度搜索下拉菜单接口
  // let url = "https://www.baidu.com/sugrec";

  // 接口接收的数据
  // const data = {
  //   prod: "pc",
  //   wd: "上海",
  //   cb: "abc"
  // }

  // 解析数据成：key1=val1&key2=val2
  // let str = "";
  // for(let i in data){
  //   str += `${i}=${data[i]}&`
  // }

  // 拼接到url
  // url += "?" + str.slice(0, -1);

  // 定义全局函数
  // function abc(res){
  //   console.log(res);
  // }

  // 检查地址拼接是否正确
  // console.log(url);

  // 创建script标签，设置src为拼接好的url
  // const script = document.createElement("script")
  // script.src = url;

  // 将script标签插入到页面最后
  // document.body.appendChild(script);

  // console.log("========")

  const search = document.querySelector(".search");
  const list = document.querySelector(".list")
  let url = "https://www.baidu.com/sugrec";

  search.oninput = function(){
    // 测试封装结果
    jsonp(url, function(res){
      // console.log(res)
      let s = "";
      res.g.forEach(val=>{
        s += `<li>${val.q}</li>`
      })
      list.innerHTML = s;
    }, {
      prod: "pc",
      wd: this.value,
      cb: "asgdfhsjf"
    }, "cb");
  }
  


  // jsonp封装之后的测试：
  // jsonp("https://suggest.taobao.com/sug", function(res){
  //   console.log(res)
  // }, {
  //   k: 1,
  //   area: "c2c",
  //   q: "上海",
  //   code: "utf-8",
  //   callback: "hadsvdfmg"
  // }, "callback");

  // jsonp封装：
    // 参数1：jsonp地址；
    // 参数2：请求成功后要执行的功能；
    // 参数3：请求时要携带的数据
  
  function jsonp(url, success, data, colName){
    let str = "";
    for(let i in data){
      str += `${i}=${data[i]}&`
    }
    url += "?" + str.slice(0, -1);

    window[data[colName]] = function(res){
      success(res);
    }

    const script = document.createElement("script")
    script.src = url;
    document.body.appendChild(script);
  }



</script>

</html>